<template>
  	<div class="home">
  		<div class="banner">
  			<img src="./img/banner_phone@3x.png" alt="">
  			<div class="tab">
	  			<div class="item-tab">
	  				<img src="./img/index_banner_icon1@3x.png" alt="">
	  				<span>人脸精准识别</span>
	  			</div>
	  			<div class="item-tab">
	  				<img src="./img/index_banner_icon2@3x.png" alt="">
	  				<span>千人千面营销</span>
	  			</div>
	  			<div class="item-tab">
	  				<img src="./img/index_banner_icon3@3x.png" alt="">
	  				<span>智能多维营销</span>
	  			</div>
	  			<div class="item-tab">
	  				<img src="./img/index_banner_icon4@3x.png" alt="">
	  				<span>智能场景复刻</span>
	  			</div>
  			</div>
  		</div>
  		<div class="container-1">
  			<h2 class="title">产品与服务</h2>
  			<div class="con">
  				<div class="tag">
  					<router-link class="item item-1" tag="div" to="/aiMarketingSystem">
  						<img src="./img/index_product_ai@3x.png" alt="">
  						<span>AI智慧营销系统</span>
  					</router-link>
  					<router-link class="item item-2" tag="div" to="/bigDataMarketingSystem">
  						<img src="./img/index_product_data@3x.png" alt="">
  						<span>大数据营销系统</span>
  					</router-link>
  				</div>
  				<div class="tag">
  					<router-link class="item item-3" tag="div" to="/precisionMarketing">
  						<img src="./img/index_product_marketing@3x.png" alt="">
  						<span>精准营销</span>
  					</router-link>
  					<router-link class="item item-4" tag="div" to="/passengerFlowAnalysis">
  						<img src="./img/index_product_customer@3x.png" alt="">
  						<span>客流分析</span>
  					</router-link>
  					<router-link class="item item-5" tag="div" to="/userPortrait">
  						<img src="./img/index_product_picture@3x.png" alt="">
  						<span>用户画像</span>
  					</router-link>
  				</div>
  			</div>
  		</div>
  		<div class="container-2">
  			<h2 class="title">行业方案</h2>
  			<div class="con">
  				<router-link class="item" tag="div" to="/wisdomStores">
  					<img src="./img/index_program_pic1@3x.png" alt="">
  					<span>智慧门店解决方案</span>
  				</router-link>
  				<router-link class="item" tag="div" to="/vrSharedHall">
  					<img src="./img/index_program_pic2@3x.png" alt="">
  					<span>VR共享展厅解决方案</span>
  				</router-link>
  				<router-link class="item" tag="div" to="/unmannedExperienceShop">
  					<img src="./img/index_program_pic3@3x.png" alt="">
  					<span>无人店解决方案</span>
  				</router-link>
  			</div>
  		</div>
  		<div class="container-3">
  			<h2 class="title">
  				新零售<span class="ai">AI</span>整体解决方案<br>开拓与引领者
  			</h2>
  			<div class="con">
  				<div class="item">
  					<img src="./img/index_content2_icon1@3x.png" alt="">
  					<span>全球首家人工智能交互平台</span>
  				</div>
  				<div class="item">
  					<img src="./img/index_content2_icon2@3x.png" alt="">
  					<span>新零售服务标准编制单位</span>
  				</div>
  				<div class="item">
  					<img src="./img/index_content2_icon3@3x.png" alt="">
  					<span>多元展示，管理，连接工具</span>
  				</div>
  			</div>
  			<router-link class="more" tag='div' to="/about">
  				<span>查看更多</span>
  				<img src="./img/common_arrow@3x.png" alt="">
  			</router-link>
  		</div>
  		<div class="container-4">
  			<h2 class="title">战略合作伙伴</h2>
  			<div id="con1">
  				<ul id="item1">
  					<li class="item-img"><img src="./partner_img/index_partner1.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner2.jpg" alt=""></li>	
  					<li class="item-img"><img src="./partner_img/index_partner3.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner4.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner5.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner6.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner7.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner8.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner9.jpg" alt=""></li>
  				</ul>
  				<ul id="r_item1"></ul>
  			</div>
  			<div id="con2">
  				<ul id="item2">
  					<li class="item-img"><img src="./partner_img/index_partner10.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner11.jpg" alt=""></li>	
  					<li class="item-img"><img src="./partner_img/index_partner12.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner13.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner14.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner15.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner16.jpg" alt=""></li>
  					<li class="item-img"><img src="./partner_img/index_partner17.jpg" alt=""></li>
  				</ul>
  				<ul id="r_item2"></ul>
  			</div>
  		</div>
  	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	export default {
		name: 'home',
		data(){
			return {

			}
		},
		mounted(){
			var time = 30;
			var con1 = document.getElementById('con1');
			var item1 = document.getElementById('item1');
			var r_item1 = document.getElementById('r_item1');
			r_item1.innerHTML = item1.innerHTML;
			var myScroll1 = setInterval(() => {
				if(con1.scrollLeft >= item1.offsetWidth){
					con1.scrollLeft = 0;
				}else{
					con1.scrollLeft ++;
				}
			}, time);

			var con2 = document.getElementById('con2');
			var item2 = document.getElementById('item2');
			var r_item2 = document.getElementById('r_item2');
			r_item2.innerHTML = item2.innerHTML;
			var myScroll2 = setInterval(() => {
				if(con2.scrollLeft <= 0){
					con2.scrollLeft += item2.offsetWidth;
				}else{
					con2.scrollLeft --;
				}
			}, time);
		},
		methods: {
		
		}
	}
</script>


<style lang="stylus" scoped>
	.home{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 6rem;
			position: relative;
			img{
				width: 100%;
				height: 100%;
			}
			.tab{
				width: 100%;
				height: 0.7rem;
				position: absolute;
				bottom: 0;
				display: flex;
				flex-direction: row;
				background: rgba(60,99,170,0.40);
				padding: 0.2rem 0;
				.item-tab{
					display: flex;
					flex: 1;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-right: rgba(255,255,255,0.1) solid 1px;
					&:last-child{
						border-right: none;
					}
					img{
						width: 0.4rem;
						height: 0.4rem;
						margin-bottom: 0.1rem;
					}
					span{
						opacity: 0.8;
						font-size: 0.2rem;
						color: #FFFFFF;
					}
				}
			}
		}
		.container-1{
			width: 100%;
			height: 6.98rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333333;
				text-align: center;
				margin: 0.6rem 0 0.5rem 0;
			}
			.con{
				width: 92%;
				display: flex;
				flex-direction: column;
				padding: 0 4%;
				.tag{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 0.2rem;
					.item{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border-radius: 0.1rem;
						img{
							width: 1rem;
							height: 1rem;
							margin-bottom: 0.1rem;
						}
						span{
							font-size: 0.28rem;
							color: #fff;
						}
						&.item-1{
							width: 3.33rem;
							height: 2.14rem;
							background-image: linear-gradient(90deg, #37A7F8 5%, #0393FF 100%);
						}
						&.item-2{
							width: 3.33rem;
							height: 2.14rem;
							background-image: linear-gradient(-270deg, #5D2DF2 0%, #5628EB 100%);
						}
						&.item-3{
							width: 2.14rem;
							height: 2.14rem;
							background-image: linear-gradient(-270deg, #F89740 0%, #FD7F40 100%);
						}
						&.item-4{
							width: 2.14rem;
							height: 2.14rem;
							background-image: linear-gradient(-270deg, #B13EEE 0%, #9240DB 100%);
						}
						&.item-5{
							width: 2.14rem;
							height: 2.14rem;
							background-image: linear-gradient(-270deg, #33C999 0%, #4EA483 100%);
						}
					}
				}
			}
		}
		.container-2{
			width: 100%;
			height: 14.48rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			background: #Fff;
			.title{
				font-size: 0.36rem;
				color: #333333;
				text-align: center;
				margin: 0.6rem 0 0.5rem 0;
			}
			.con{
				width: 92%;
				display: flex;
				flex-direction: column;
				padding: 0 4%;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 0.2rem;
					img{
						width: 6.9rem;
						height: 3rem;
					}
					span{
						font-size: 0.3rem;
						color: #3C63AA;
						line-height: 3;
					}
				}
			}
		}
		.container-3{
			width: 100%;
			height: 7.4rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			background-image: linear-gradient(0deg, #233574 0%, #0D183E 99%);
			.title{
				width: 3.95rem;
				line-height: 0.6rem;
				font-size: 0.36rem;
				color: #fff;
				text-align: center;
				margin: 0.6rem auto 0.5rem auto;
				.ai{
					font-family: Arial
				}
			}
			.con{
				width: 84.8%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 0 7.6%;
				.item{
					width: 1.6rem;
					display: flex;
					flex-direction: column;
					align-items: center;
					img{
						width: 1.5rem;
						height: 1.5rem;
					}
					span{
						font-size: 0.24rem;
						opacity: 0.8;
						color: #fff;
						line-height: 1.5;
						text-align: center;
					}
				}
			}
			.more{
				width: 2.4rem;
				height: 0.8rem;
				opacity: 0.3;
				border: 2px solid #FFFFFF;
				border-radius: 1rem;
				margin: 0.9rem auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				span{
					font-size: 0.24rem;
					color: #fff;
					margin-right: 0.1rem;
				}
				img{
					width: 0.3rem;
					height: 0.3rem;
				}
			}
		}
		.container-4{
			width: 100%;
			height: 4.7rem;
			overflow: hidden;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333333;
				text-align: center;
				margin: 0.6rem 0 0.5rem 0;
			}
			#con1, #con2{
				width: 92%;
				height: 0.96rem;
				margin: 0 4%;
				overflow: hidden;
                margin-bottom: 0.4rem;
                display: flex;
				flex-direction: row;
				#item1, #r_item1, #item2, #r_item2{
					height: 0.96rem;
					display: flex;
					flex-direction: row;
					// overflow: hidden;
					.item-img{
						width: 2.16rem;
						height: 0.96rem;
						background: #FFFFFF;
						box-shadow: 0px 2px 6px 0 #eee;
						margin-right: 0.2rem;
						border-radius: 5px;
						img{ 
							width: 2.16rem;
							height: 0.96rem;
							display: block;
						}
					}
				}
			}
		}
	}
</style>




 
 